<template>
    <!-- 可以有多个根元素 -->
    <div>当前鼠标位置</div>
    <div>x: {{ mouse.x }}</div>
    <div>y: {{ mouse.y }}</div>
    <div>当前点击次数：{{ count }}</div>
    <button @click="add">点击</button>
</template>

<script>
export default {
    // vue2 中采用的是 options API
    // 常见的配置项: data created methods watch computed components
    data() {
        return {
            mouse: {
                x: 100,
                y: 100
            },
            count: 0,
        }
    },
    methods: {
        add() {
            this.count++
        },
        mouseMove(e) {
            this.mouse.x = e.pageX
            this.mouse.y = e.pageY
            // this.mouse.x = e.clientX
            // this.mouse.y = e.clientY
        }
    },
    mounted() {
        document.addEventListener('mousemove', this.mouseMove)
    },
    destroyed() {
        document.removeEventListener('mousemove', this.mouseMove)
    }

}
</script>